import {ref, onMounted, onUnmounted} from 'vue'

export type WindowSize = {
    width: number
    height: number
}

export const useWindowSize = () => {
    const width = ref<number>(window.innerWidth)
    const height = ref<number>(window.innerHeight)
    const resizeHandler = () => {
        width.value = window.innerWidth
        height.value = window.innerHeight
    }
    // 挂载事件
    onMounted(() => {
        window.addEventListener('resize', resizeHandler)
    })
    // 卸载事件
    onUnmounted(() => {
        window.removeEventListener('resize', resizeHandler)
    })
    // 返回高度和宽度
    return {
        width,
        height
    }
}
